<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>超市货物管理</title>
<%--    引入layui框架的css样式--%>
    <link href="/lib/layui/css/layui.css" rel="stylesheet">
</head>
<body>

<form class="layui-form" action="">
    <div class="layui-form-item" style="margin-top: 15px">
<%-- 一个行内--%>
        <div class="layui-inline">
            <label class="layui-form-label">货物名称</label>
            <div class="layui-input-inline">
                <input type="text" id="search1" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">货物分类</label>
            <div class="layui-input-inline">
                <input type="text" id="search2" autocomplete="off" class="layui-input">
            </div>
        </div>

         <input id="search" type="button" value="查询" class="layui-btn">
        <input id="add" type="button" value="新增" class="layui-btn">
        <table id="gTable"></table>
    </div>
</form>

<%--script代码不会展示在页面上 是代码 脚本--%>
<%--template 模板--%>
<%--弹出窗口的模板--%>
<script id="template1" type="text/html">
    <form class="layui-form" action="" lay-filter="form1">

        <div class="layui-form-item" style="margin-top: 15px">
            <%-- 一个行内--%>
            <div class="layui-inline">
                <label class="layui-form-label">货物名称</label>
                <div class="layui-input-inline">
                    <%--编辑时提交有ID--%>
                    <input type="hidden" name="id">
                    <input type="text" name="name" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">货物产地</label>
                <div class="layui-input-inline">
                    <input type="text" name="origin" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">货物类型</label>
                <div class="layui-input-inline">
                    <input type="text" name="type" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">货物进价</label>
                <div class="layui-input-inline">
                    <input type="text" name="cost" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">货物售价</label>
                <div class="layui-input-inline">
                    <input type="text" name="price" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">货物库存</label>
                <div class="layui-input-inline">
                    <input type="text" name="inventory" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">货物分区</label>
                <div class="layui-input-inline">
                    <select id="area" name="areaId"></select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <%--按钮居中--%>
            <div class="layui-input-block">
                <input type="reset" value="重置" class="layui-btn layui-btn-primary">
                <input id="save" type="button" value="保存" class="layui-btn">
            </div>
        </div>

    </form>
</script>

<%--表格操作模板--%>
<script id="template2" type="text/html">
    <input lay-event="edit" type="button" class="layui-btn layui-btn-xs" value="编辑">
    <input lay-event="delete" type="button" class="layui-btn layui-btn-xs layui-bg-red" value="删除">
</script>

<%--引用layui--%>
<script src="/lib/layui/layui.js"></script>
<script type="text/javascript">
    //告诉浏览器加载layui框架中的哪些组件
    //加载完小组件 就执行function
    layui.use(['table','layer','form'],function (){
        //第一步 先对加载的组件起名字
        var table = layui.table;//操作表格
        var layer = layui.layer;//操作弹窗
        var $ = layui.jquery;
        var form = layui.form;

        // 给查询按钮绑定事件
        $("#search").on("click",function (){
            //用js发起一个请求去要一些数据回来，要到之后把数据插入到table中
            //Ajax异步请求

            //渲染
            table.render({
                elem:"#gTable",//渲染哪个表格
                url:"/goods?cmd=select",//请求地址,指定一下发哪个请求要数据
                cols:[[  //表头，要完之后，把表格塞进这些表头中展示
                    {title:"ID",field:"id"},//字段
                    {title:"货物名称",field:"name"},
                    {title:"货物产地",field:"origin"},
                    {title:"货物类型",field:"type"},
                    {title:"货物进价",field:"cost"},
                    {title:"货物售格",field:"price"},
                    {title:"货物库存",field:"inventory"},
                    {title: "货物分区",field: "areaName"},
                    {title: "操作",templet: "#template2"}
                ]],
                //模糊搜索
                where:{name:$("#search1").val(),type:$("#search2").val()},
                //分页工具
                page:true,
                limits:[5,10,20],
                limit:5
            });
        }).click();

        // 给新增按钮绑定事件
        $("#add").on("click",function (){

            //发请求要数据 要到商品分类在弹窗口
            $.get("/area?cmd=all",function (areas){
                layer.open({
                    title:"新增货物",
                    type:1,//弹出类型
                    area:['400px','400px'],//宽高
                    content:$("#template1").html()//弹出内容
                });
                //把option放上
                // 遍历
                $.each(areas,function (index,item){
                    $("#area").append("<option value='"+item.id+"'>"+item.name+"<option/>")
                });

                form.render();

                //给保存按钮绑定事件
                $("#save").on("click",function (){
                    //1 把表单的数据都取出来，找个变量装一下
                    //val 获取值
                    //lay-filter
                    //data 整个表单的所有的值
                    var data = form.val("form1");
                    console.log(data);

                    //2 派一个人去发请求，把上边取出来的数据带过去(Ajax)

                    //jQuery封装好的发请求的方法
                    //第一个参数：请求地址
                    //第二个参数：请求时传的数据
                    //第三个参数：请求成功之后做什么
                    //往对象data里加参数，直接加
                    data.cmd = "save";
                    $.post("/goods",data,function () {
                        //关窗口
                        layer.closeAll();
                        //给成功提示
                        layer.msg("保存成功");
                        //再查一遍表格的数据(点一下查询按钮)
                        $("#search").click();
                    });
                });
            });
        });

        //给表格绑事件
        table.on("tool",function (obj){
            // 参数带过来的event属性
            var event = obj.event;
            //data 没展示的也能查出来  点的那一行的数据
            var data = obj.data;
            if(event === "edit"){
                //点了编辑
                //去后台获取这个商品的所有的数据,取成功了再弹出
                $.get("/goods?cmd=info&id="+data.id,function (goods){
                 $.get("/area?cmd=all",function (areas){
                    layer.open({
                        title:"编辑货物",
                        type:1,//弹出类型
                        area:['400px','400px'],//宽高
                        content:$("#template1").html()//弹出内容
                    });
                    $.each(areas,function (index,item){
                        $("#area").append("<option value='"+item.id+"'>"+item.name+"<option/>");
                    });
                    form.render();
                    form.val("form1",goods);
                    $("#save").on("click",function (){
                        var data = form.val("form1");
                        console.log(data);
                        data.cmd = "save";
                        $.post("/goods",data,function () {
                            //关窗口
                            layer.closeAll();
                            //给成功提示
                            layer.msg("保存成功");
                            //再查一遍表格的数据(点一下查询按钮)
                            $("#search").click();
                        });
                    });
                });
                });
            }
            if(event === "delete"){//点了删除
                layer.confirm("您确定要删除这个货物吗？",function (){
                    $.post("/goods",{cmd:"delete",id:data.id},function (){
                        layer.closeAll();
                        $("#search").click();
                    });
                },function (){});
            }
        });
    });
</script>
</body>
</html>
